<template>
	<div id="followStyle">
		<!-- 标题 -->
		<h2>{{ datas.text }}</h2>
		<el-tabs type="border-card" :stretch="true">
			<el-tab-pane label="内容">
				<el-form>
					<el-form-item class="lef" label="公众号图片">
						<div class="follow-pic">
							<img :src="prefix + datas.heade" alt="" />
							<el-button @click="$refs.FileChoiceRef.openFileChoideDialog()" class="uploadImg" type="primary" plain> 上传公众号图片 </el-button>
						</div>
					</el-form-item>

					<el-form-item class="lef" label="公众号名称">
						<el-input type="text" v-model="datas.followName" placeholder="请输入公众号名称" />
					</el-form-item>

					<el-form-item class="lef" label="公众号Id">
						<el-input type="text" v-model="datas.followAppId" placeholder="请输入公众号Id" />
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="样式">
				<DataStyle :datas="datas.dataStyle"></DataStyle>
			</el-tab-pane>
			<el-tab-pane label="数据">
				<StyleComponentData :datas="datas"></StyleComponentData>
			</el-tab-pane>
		</el-tabs>

		<!-- 上传图片 -->
		<FileChoice ref="FileChoiceRef" @choiceFile="choiceFile"></FileChoice>
	</div>
</template>

<script>
import { defineAsyncComponent } from 'vue';
import { STATIC_URL } from '/@/utils/config';
const FileChoice = defineAsyncComponent(() => import('/@/views/file/choice/index.vue'));
export default {
	name: 'followStyle',
	props: {
		datas: Object,
	},
	data() {
		return {
			prefix: STATIC_URL,
		};
	},

	created() {
		console.log(this.datas, '-------------followStyle datas');
	},

	mounted() {},

	methods: {
		// 提交
		choiceFile(res) {
			this.datas.heade = res.visitRelativePath;
			this.$emit('refreshScroll');
		},
	},

	computed: {},

	watch: {},
	components: {
		FileChoice,
	},
};
</script>

<style lang="scss" scoped>
#followStyle {
	width: 100%;
	// position: absolute;
	// left: 0;
	// top: 0;
	padding: 0 10px 20px;
	box-sizing: border-box;
}

/* 标题 */
h2 {
	padding: 24px 16px 24px 0;
	margin-bottom: 15px;
	border-bottom: 1px solid #f2f4f6;
	font-size: 18px;
	font-weight: 600;
	color: #323233;
}
.lef {
	:deep(.el-form-item__label) {
		text-align: left;
	}
}

.follow-pic {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	img {
		display: block;
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}
	.uploadImg {
		width: 80%;
		margin-top: 20px;
	}
}

.el-tabs--border-card {
	:deep(.el-tabs__content) {
		padding: 0px !important;
	}
	border: 0px;

	:deep(.el-tabs__header) {
		background-color: #d9d9d9 !important;
	}
}
</style>
